<template>
  <div class="partner-links">
    <div class="page-header">
      <h2>合作链接管理</h2>
      <p>管理合作伙伴链接和友情链接</p>
    </div>
    
    <div class="content-wrapper">
      <!-- 搜索和操作栏 -->
      <div class="search-action-bar">
        <div class="search-box">
          <input 
            type="text" 
            placeholder="搜索合作伙伴名称或链接..." 
            v-model="searchQuery"
            @keyup.enter="searchPartnerLinks"
            class="search-input"
          >
          <button class="search-btn" @click="searchPartnerLinks">🔍</button>
        </div>
        
        <button class="btn btn-primary create-btn" @click="showAddModal = true">
          <i class="icon">➕</i>
          添加合作链接
        </button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载合作链接数据...</p>
      </div>
      
      <!-- 空状态 -->
      <div v-else-if="partnerLinks.length === 0" class="empty-state">
        <div class="empty-icon">🔗</div>
        <h3>暂无合作链接</h3>
        <p>{{ searchQuery ? '没有找到匹配的合作链接' : '还没有添加任何合作链接' }}</p>
        <button class="btn btn-primary" @click="showAddModal = true" v-if="!searchQuery">
          添加第一个合作链接
        </button>
      </div>
      
      <!-- 合作链接列表 -->
      <div v-else class="links-grid">
        <div 
          class="link-card" 
          v-for="link in partnerLinks" 
          :key="link.id"
        >
          <div class="card-header">
            <div class="partner-preview">
              <img :src="link.logoUrl" :alt="link.linkName" v-if="link.logoUrl" class="partner-logo">
              <div class="logo-placeholder" v-else>
                <span>{{ link.linkName ? link.linkName.charAt(0) : '合' }}</span>
              </div>
            </div>
            
            <div class="partner-info">
              <h3>{{ link.linkName }}</h3>
              <div class="partner-meta">
                <span class="position-badge">类型: {{ getTypeText(link.type) }}</span>
                <span class="status-badge" :class="link.status === 'active' ? 'status-active' : 'status-inactive'">
                  {{ getStatusText(link.status) }}
                </span>
              </div>
            </div>
            
            <div class="card-actions">
              <button class="action-btn edit" @click="editLink(link)" title="编辑">✏️</button>
              <button class="action-btn delete" @click="deleteLink(link.id)" title="删除">🗑️</button>
            </div>
          </div>
          
          <div class="card-content">
            <div class="partner-details">
              <div class="detail-row">
                <span class="label">链接ID:</span>
                <span class="value">{{ link.id }}</span>
              </div>
              <div class="detail-row" v-if="link.linkUrl">
                <span class="label">网站链接:</span>
                <a :href="link.linkUrl" target="_blank" class="value link">{{ link.linkUrl }}</a>
              </div>
              <div class="detail-row" v-if="link.createdAt">
                <span class="label">创建时间:</span>
                <span class="value">{{ formatDate(link.createdAt) }}</span>
              </div>
              <div class="detail-row" v-if="link.updatedAt">
                <span class="label">更新时间:</span>
                <span class="value">{{ formatDate(link.updatedAt) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页组件 -->
      <div v-if="partnerLinks.length > 0" class="pagination-wrapper">
        <div class="pagination-info">
          显示第 {{ (pagination.pageNum - 1) * pagination.pageSize + 1 }} - 
          {{ Math.min(pagination.pageNum * pagination.pageSize, pagination.total) }} 条，
          共 {{ pagination.total }} 条记录
        </div>
        
        <div class="pagination-controls">
          <button 
            class="pagination-btn" 
            @click="changePage(pagination.pageNum - 1)"
            :disabled="pagination.pageNum <= 1"
          >
            上一页
          </button>
          
          <div class="page-numbers">
            <button 
              v-for="page in getPageNumbers()" 
              :key="page"
              class="page-number"
              :class="{ active: page === pagination.pageNum }"
              @click="changePage(page)"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="pagination-btn" 
            @click="changePage(pagination.pageNum + 1)"
            :disabled="pagination.pageNum >= Math.ceil(pagination.total / pagination.pageSize)"
          >
            下一页
          </button>
        </div>
      </div>
      
      <!-- 添加/编辑模态框 -->
      <div class="modal-overlay" v-if="showAddModal || showEditModal" @click="closeModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ showEditModal ? '编辑合作链接' : '添加合作链接' }}</h3>
            <button class="close-btn" @click="closeModal">✕</button>
          </div>
          
          <div class="modal-body">
            <form @submit.prevent="saveLink">
              <div class="form-group">
                <label>合作伙伴名称 *</label>
                <input 
                  type="text" 
                  v-model="formData.name" 
                  placeholder="请输入合作伙伴名称"
                  required
                  class="form-input"
                >
              </div>
              
              <div class="form-group">
                <label>网站链接 *</label>
                <input 
                  type="url" 
                  v-model="formData.url" 
                  placeholder="请输入网站链接"
                  required
                  class="form-input"
                >
              </div>
              
              <div class="form-group">
                <label>Logo URL</label>
                <input 
                  type="url" 
                  v-model="formData.logo" 
                  placeholder="请输入Logo链接"
                  class="form-input"
                >
              </div>
              
              <div class="form-group">
                <label>描述</label>
                <textarea 
                  v-model="formData.description" 
                  placeholder="请输入合作伙伴描述"
                  rows="3"
                  class="form-textarea"
                ></textarea>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>合作类型 *</label>
                  <select v-model="formData.type" required class="form-select">
                    <option value="">请选择合作类型</option>
                    <option value="strategic">战略合作</option>
                    <option value="supplier">供应商</option>
                    <option value="media">媒体合作</option>
                    <option value="friendship">友情链接</option>
                  </select>
                </div>
                
                <div class="form-group">
                  <label>状态</label>
                  <select v-model="formData.status" class="form-select">
                    <option value="active">已启用</option>
                    <option value="inactive">已禁用</option>
                    <option value="pending">待审核</option>
                  </select>
                </div>
              </div>
              
              <div class="form-row contact-inputs">
                <div class="form-group">
                  <label>联系人姓名</label>
                  <input 
                    type="text" 
                    v-model="formData.contact.name" 
                    placeholder="请输入联系人姓名"
                    class="form-input"
                  >
                </div>
                
                <div class="form-group">
                  <label>联系人邮箱</label>
                  <input 
                    type="email" 
                    v-model="formData.contact.email" 
                    placeholder="请输入联系人邮箱"
                    class="form-input"
                  >
                </div>
              </div>
              
              <div class="form-actions">
                <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
                <button type="submit" class="btn btn-primary">{{ showEditModal ? '更新' : '添加' }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'PartnerLinks',
  data() {
    return {
      partnerLinks: [],
      searchQuery: '',
      showAddModal: false,
      showEditModal: false,
      editingId: null,
      loading: false,
      selectedLinks: [],
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      formData: {
        name: '',
        url: '',
        logo: '',
        description: '',
        type: '',
        status: 'active',
        contact: {
          name: '',
          email: ''
        }
      }
    };
  },
  mounted() {
    this.fetchPartnerLinks();
  },
  methods: {
    // 获取合作链接列表
    async fetchPartnerLinks() {
      try {
        this.loading = true;
        const params = {
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        };
        
        // 添加搜索关键词
        if (this.searchQuery.trim()) {
          params.keyword = this.searchQuery.trim();
        }
        
        const response = await axios.get('http://localhost:8080/api/v1/partner-links/list', {
          params: params
        });
        
        console.log('获取合作链接响应:', response.data);
        
        if (response.data.code === 200 && response.data.ok) {
          const pageInfo = response.data.data;
          this.partnerLinks = pageInfo.list || [];
          
          // 更新分页信息
          this.pagination = {
            pageNum: pageInfo.pageNum,
            pageSize: pageInfo.pageSize,
            total: pageInfo.total
          };
        } else {
          console.error('获取合作链接失败:', response.data.msg);
          alert('获取合作链接失败: ' + (response.data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('获取合作链接出错:', error);
        if (error.response) {
          alert('获取合作链接失败: ' + (error.response.data.msg || '服务器错误'));
        } else if (error.request) {
          alert('获取合作链接失败: 网络连接错误');
        } else {
          alert('获取合作链接失败: 请求配置错误');
        }
      } finally {
        this.loading = false;
      }
    },
    
    // 搜索合作链接
    searchPartnerLinks() {
      this.pagination.pageNum = 1; // 重置到第一页
      this.fetchPartnerLinks();
    },
    
    // 添加合作链接
     async addLink() {
       try {
         // 根据后端API要求的数据结构
         const linkData = {
           linkName: this.formData.name,
           linkUrl: this.formData.url,
           logoUrl: this.formData.logo || '',
           sortOrder: 0,
           createdAt: '',
           updatedAt: '',
           id: 0
         };
        
        const response = await axios.post('http://localhost:8080/api/v1/partner-links/add', linkData, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('添加合作链接响应:', response.data);
        
        if (response.data.code === 200 && response.data.ok && response.data.data === true) {
          alert('添加合作链接成功');
          this.closeModal();
          this.fetchPartnerLinks(); // 重新获取列表
        } else {
          alert('添加合作链接失败: ' + (response.data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('添加合作链接出错:', error);
        if (error.response) {
          console.error('错误详情:', error.response.data);
          alert('添加合作链接失败: ' + (error.response.data.message || error.response.data.msg || '服务器错误'));
        } else {
          alert('添加合作链接失败: 网络连接错误');
        }
      }
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '-';
      try {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        });
      } catch (error) {
        return dateString;
      }
    },
    
    // 分页相关方法
    changePage(page) {
      if (page < 1 || page > Math.ceil(this.pagination.total / this.pagination.pageSize)) {
        return;
      }
      this.pagination.pageNum = page;
      this.fetchPartnerLinks();
    },
    
    getPageNumbers() {
      const totalPages = Math.ceil(this.pagination.total / this.pagination.pageSize);
      const current = this.pagination.pageNum;
      const pages = [];
      
      // 显示当前页前后2页
      const start = Math.max(1, current - 2);
      const end = Math.min(totalPages, current + 2);
      
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      
      return pages;
    },
    
    // 工具方法
    formatNumber(num) {
      return num ? num.toLocaleString('zh-CN') : '0';
    },
    
    getTypeText(type) {
      const typeMap = {
        strategic: '战略合作',
        supplier: '供应商',
        media: '媒体合作',
        friendship: '友情链接'
      };
      return typeMap[type] || type;
    },
    
    getStatusText(status) {
      const statusMap = {
        active: '已启用',
        inactive: '已禁用',
        pending: '待审核'
      };
      return statusMap[status] || status;
    },
    
    // 编辑链接
    editLink(link) {
      this.editingId = link.id;
      this.formData = {
        name: link.linkName || '',
        url: link.linkUrl || '',
        logo: link.logoUrl || '',
        description: link.description || '',
        type: link.type || '',
        status: link.status || 'active',
        contact: {
          name: link.contactName || '',
          email: link.contactEmail || ''
        }
      };
      this.showEditModal = true;
    },
    
    // 删除单个链接
    async deleteLink(id) {
      if (!confirm('确定要删除这个合作链接吗？')) {
        return;
      }
      
      try {
        const response = await axios.delete(`http://localhost:8080/api/v1/partner-links/delete/${id}`);
        
        console.log('删除合作链接响应:', response.data);
        
        if (response.data.code === 200 && response.data.ok && response.data.data === true) {
          alert('删除合作链接成功');
          this.fetchPartnerLinks(); // 重新获取列表
        } else {
          alert('删除合作链接失败: ' + (response.data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('删除合作链接出错:', error);
        if (error.response) {
          alert('删除合作链接失败: ' + (error.response.data.msg || '服务器错误'));
        } else {
          alert('删除合作链接失败: 网络连接错误');
        }
      }
    },
    
    // 批量删除
    async batchDelete() {
      if (this.selectedLinks.length === 0) {
        alert('请选择要删除的合作链接');
        return;
      }
      
      if (!confirm(`确定要删除选中的 ${this.selectedLinks.length} 个合作链接吗？`)) {
        return;
      }
      
      try {
        const response = await axios.post('http://localhost:8080/api/v1/partner-links/delete/batch', this.selectedLinks, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('批量删除合作链接响应:', response.data);
        
        if (response.data.code === 200 && response.data.ok && response.data.data === true) {
          alert('批量删除合作链接成功');
          this.selectedLinks = []; // 清空选择
          this.fetchPartnerLinks(); // 重新获取列表
        } else {
          alert('批量删除合作链接失败: ' + (response.data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('批量删除合作链接出错:', error);
        if (error.response) {
          alert('批量删除合作链接失败: ' + (error.response.data.msg || '服务器错误'));
        } else {
          alert('批量删除合作链接失败: 网络连接错误');
        }
      }
    },
    
    // 更新合作链接
    async updateLink() {
      try {
        // 根据后端API要求的数据结构
        const linkData = {
          id: this.editingId,
          linkName: this.formData.name,
          linkUrl: this.formData.url,
          logoUrl: this.formData.logo || '',
          sortOrder: 0,
          createdAt: '',
          updatedAt: ''
        };
        
        const response = await axios.put(`http://localhost:8080/api/v1/partner-links/update/${this.editingId}`, linkData, {
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('更新合作链接响应:', response.data);
        
        if (response.data.code === 200 && response.data.ok && response.data.data === true) {
          alert('更新合作链接成功');
          this.closeModal();
          this.fetchPartnerLinks(); // 重新获取列表
        } else {
          alert('更新合作链接失败: ' + (response.data.msg || '未知错误'));
        }
      } catch (error) {
        console.error('更新合作链接出错:', error);
        if (error.response) {
          console.error('错误详情:', error.response.data);
          alert('更新合作链接失败: ' + (error.response.data.message || error.response.data.msg || '服务器错误'));
        } else {
          alert('更新合作链接失败: 网络连接错误');
        }
      }
    },

    // 保存链接（新增或更新）
    async saveLink() {
      // 表单验证
      if (!this.formData.name.trim()) {
        alert('请输入合作伙伴名称');
        return;
      }
      if (!this.formData.url.trim()) {
        alert('请输入网站链接');
        return;
      }
      if (!this.formData.type) {
        alert('请选择合作类型');
        return;
      }
      
      if (this.showEditModal) {
        await this.updateLink();
      } else {
        await this.addLink();
      }
    },
    
    // 关闭模态框
     closeModal() {
       this.showAddModal = false;
       this.showEditModal = false;
       this.editingId = null;
       this.formData = {
         name: '',
         url: '',
         logo: '',
         description: '',
         type: '',
         status: 'active',
         contact: {
           name: '',
           email: ''
         }
       };
     }
  }
};
</script>

<style scoped>
.partner-links {
  padding: 0;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #2c3e50;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.search-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  gap: 20px;
}

.search-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  width: 300px;
  transition: all 0.3s ease;
  background: white;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-btn {
  padding: 12px 16px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.filter-section {
  display: flex;
  gap: 12px;
}

.filter-select {
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.create-btn {
  padding: 12px 24px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn .icon {
  margin-right: 8px;
  font-size: 16px;
}

.btn-danger {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  position: relative;
  
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.btn-danger:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.batch-delete-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.batch-delete-btn:not(.has-selection) {
  opacity: 0.7;
  background: #9ca3af;
}

.batch-delete-btn.has-selection {
  opacity: 1;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: pulse 2s infinite;
}

.batch-delete-btn.has-selection:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
  50% { box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); }
}

.btn .icon {
  margin-right: 8px;
  font-size: 16px;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.link-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.partner-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  
  flex-shrink: 0;
}

.partner-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
}

.partner-info {
  flex: 1;
}

.partner-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #2c3e50;
  font-weight: 600;
}

.partner-meta {
  display: flex;
  gap: 8px;
}

.position-badge,
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.partner-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #6c757d;
  line-height: 1.4;
}

.partner-description {
  color: #6c757d;
  font-size: 14px;
  margin: 8px 0;
  line-height: 1.4;
}

.partner-url {
  font-size: 12px;
  color: #667eea;
  text-decoration: none;
}

.partner-url:hover {
  text-decoration: underline;
}

.card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #e5e7eb;
}

.action-btn.edit:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.action-btn.delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.card-content {
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}

.partner-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.label {
  color: #6b7280;
  font-weight: 500;
}

.value {
  color: #111827;
  font-weight: 400;
}

.value.link {
  color: #3b82f6;
  text-decoration: none;
}

.value.link:hover {
  text-decoration: underline;
}

.type-badge,
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}

.type-badge.strategic {
  background: #e3f2fd;
  color: #1976d2;
}

.type-badge.supplier {
  background: #f3e5f5;
  color: #7b1fa2;
}

.type-badge.media {
  background: #e8f5e8;
  color: #388e3c;
}

.type-badge.friendship {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.link-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.card-footer {
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.contact-info {
  font-size: 14px;
  color: #6c757d;
}

.contact-label {
  font-weight: 500;
}

.contact-name {
  margin: 0 8px;
  color: #2c3e50;
  font-weight: 500;
}

.contact-email {
  color: #667eea;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f8f9fa;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6c757d;
}

.close-btn:hover {
  background: #e9ecef;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #667eea;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #6b7280;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #374151;
  font-weight: 600;
}

.empty-state p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

/* 加载状态样式 */
.loading-container {
  text-align: center;
  padding: 48px 20px;
  color: #6b7280;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-container p {
  margin: 0;
  font-size: 14px;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.pagination-info {
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pagination-btn {
  padding: 10px 16px;
  border: 1px solid #e1e5e9;
  background: white;
  color: #495057;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-numbers {
  display: flex;
  gap: 8px;
}

.page-number {
  padding: 10px 14px;
  border: 1px solid #e1e5e9;
  background: white;
  color: #495057;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 44px;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-number:hover {
  background: #f8f9fa;
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.page-number.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

@media (max-width: 1024px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .search-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }
  
  .search-box {
    justify-content: center;
  }
  
  .search-input {
    width: 100%;
    max-width: 300px;
  }
  
  .create-btn {
    align-self: center;
    width: fit-content;
  }
  
  .links-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .partner-meta {
    grid-template-columns: 1fr;
  }
  
  .pagination-wrapper {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .pagination-controls {
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>